//date: 2017-01-04 author: 杜关兴 note:头像裁剪 other：（支持主流浏览器 ;ie9 及以上 ；主流html5 ;ie9及以下flash）
/*
 funimagecropper：方法调用即可
*/
function funimagecropper(){
    //上传

    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: false,

        // swf文件路径
        swf: '../../static/common/js/imagecropper/Uploader.swf?v='+Math.random()*9,

        // 文件接收服务端。
        server: '',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
        },
        //配置生成缩略图的选项    0-1 百分比显示
        thumb :{
                    width: 1,
                    height: 1,

                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 100,

                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,

                    // 是否允许裁剪。
                    crop: false,

                    // 为空的话则保留原有图片格式。
                    // 否则强制转换成指定的类型。
                    type: 'image/jpg'
                },
        //配置压缩的图片的选项        
        compress :false
    });
    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file,thumbnailWidth, thumbnailHeight  ) {

        $("#uploader-demo-id").html(file.id);
        $("#uploader-demo-name").html(file.name);
        $("#uploader-demo-size").html(file.size);
        $("#uploader-demo-type").html(file.type);
        $("#uploader-demo-ext").html(file.ext);
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 w*h
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $("#uploader-demo-name").html("不能预览");
                return false;
            }

            $("#uploader-demo-img").attr( 'src', src );
            $('#image').cropper('replace',src);//重置裁剪需要的图片路径
            $(".preview img").removeClass("cropper-hidden");//显示缩略图
            uploader.reset();

        }, thumbnailWidth, thumbnailHeight );
    });
    //裁剪
    var $previews = $('.preview');
    $('#image').cropper({
      aspectRatio: 1 / 1,
      zoomable: null,
      mouseWheelZoom: null,
      guides: null,
      build: function (e) {
        var $clone = $(this).clone();
        $clone.css({
          display: 'block',
          width: '100%',
          minWidth: 0,
          minHeight: 0,
          maxWidth: 'none',
          maxHeight: 'none'
        });

        $previews.css({
          width: '100%',
          overflow: 'hidden'
        }).html($clone);
        $(".preview img").removeClass("cropper-hidden");//显示缩略图

      },

      crop: function (e) {
        var imageData = $(this).cropper('getImageData');
        var previewAspectRatio = e.width / e.height;

        $previews.each(function () {
          var $preview = $(this);
          var previewWidth = $preview.width();
          var previewHeight = previewWidth / previewAspectRatio;
          var imageScaledRatio = e.width / previewWidth;

          $preview.height(previewHeight).find('img').css({
            width: imageData.naturalWidth / imageScaledRatio,
            height: imageData.naturalHeight / imageScaledRatio,
            marginLeft: -e.x / imageScaledRatio,
            marginTop: -e.y / imageScaledRatio
          });
        });

      }

    });
    //保存
    $("#uploader-save").click(function(){
         //console.log($('#image').cropper('getCroppedCanvas'));
         //nsole.log($('#image').cropper('getData'));//获取裁剪的left top width height
         $("#uploader-canvas").empty();
         $("#uploader-canvas").append($('#image').cropper('getCroppedCanvas'));
         $("#uploader-save-img").attr('src',$("#uploader-canvas canvas")[0].toDataURL("image/png", 1.0));
         alert($("#uploader-save-img").attr("src"));   
    });
    //重置
    $("#uploader-clear").click(function(){
         $('#image').cropper('replace',"dist/aa.png");//重置裁剪需要的图片路径
        $(".preview img").removeClass("cropper-hidden");//显示缩略图
    });
    //end

};